import React from 'react';
import classNames from 'classnames';

const HoverMessageChannelVer = React.createClass({
  getInitialState() {
    return {
      searchData: '',
      showMessage: false
    };
  },
  onMouseOver() {
    this.setState({ showMessage: true });
  },
  onMouseOut() {
    this.setState({ showMessage: false });
  },
  render() {
    const { showMessage } = this.state;
    return (
      <div className="hover-message">
        <img className="hover-img w30" src="/static/dist-static/img/question_1.png" alt="" />
        <div onMouseOut={this.onMouseOut} onMouseOver={this.onMouseOver} className={classNames('hover-message-content', { none: !showMessage })}>
          <p className="hover-show" onMouseOver={this.onMouseOver} ></p>
          <div className="arrow"></div>
          <p className="font-bold">渠道识别码</p>
          <p>3位数字，(各渠道识别码详见<a href="http://10.0.0.90:8080/pages/viewpage.action?pageId=953624" target="_blank">V5000合作项目代码及渠道识别码</a>) </p>
        </div>
      </div>
    );
  }
});

export default HoverMessageChannelVer;
